<style>
.box table {
	margin: 0 auto;
	vertical-align: middle;
}
.box th {
	font-weight: normal;
	text-align: right;
	width: 13em;
}
.box td {
	padding: .4em 1em;
}
.box .value {
	height: 3em;
	width: 320px;
	color: blue;
	cursor: pointer;
}
.box .value input[type=text], .box input[type=password] {
	margin-left: -4px;
}
.box td.inplace_opt {
	color: gray;
}
.box td.inplace_req {
	color: red;
}

.box td.status {
	text-align: center;
	width: 8em;
	color: red;
}
.box td.status img {
	height: 20px;
}

#nfSignIn input[type=text] {
	width: 203px;
	margin-right: 2px;
}
#nfPassword input[type=password] {
	width: 115.25px;
	margin-right: 89.75px;
}
#Path input[type=text] {
	width: 203px;
	margin-right: 2px;
}
#DiskLimit input[type=text],
#Port input[type=text] {
	width: 40px;
	margin-right: 165px;
}
#TargetBitrate input[type=text] {
	width: 40px;
	margin-right: 142px;
}
</style>
<%= javascript_include_tag 'jquery', 'jquery.inplace.js', 'flash' %>
<script type='text/javascript'>//<![CDATA[
var SPIN = '<img src="/images/spinner.gif" />';

$(function() {
<% if flash[:notice] %>
	Flash.flash(<%= flash[:notice].to_json %>);
<% end %>
	$.extend($.fn.editInPlace.defaults, {url: '/config/update', show_buttons: 1, default_text: '[unspecified]'});

	$('#nfSignIn').editInPlace({success: test_login, default_class: 'inplace_req'});
	$('#nfPassword').editInPlace({field_type: 'password', default_text: '[select to change]', success: test_password});
	$('#Path').editInPlace({success: test_path, default_class: 'inplace_req'});
	$(':radio[name="post[Bitrate]"]').click(updateBitrate);
	$('#DiskLimit, #BitrateCustom, #Port').editInPlace({default_class: 'inplace_opt'});
	$('#post_Bitrate_<%= @post.Bitrate || "highest" %>')[0].checked = true;
	$('#post_PollInterval').change(updatePollInterval).val(<%= @post.PollInterval %>);
	$('#post_ShowThumbs').click(updateShowThumbs);
	$('#post_Logging').click(updateLogging);

	$(':radio + span').css('cursor', 'pointer').click(function() { $(this).prev().click(); });

	updatePassword();
});

function test_login(html) {
	$('#loginStatus').html(SPIN).load('/config/test_login', {}, updatePassword);
	return html;
}

function test_password(html) {
	$('#loginStatus').html(SPIN).load('/config/test_login', {}, updatePassword);
	return '';
}

function updatePassword() {
	$('#nfPassword').
		removeClass('inplace_opt inplace_req').
		addClass($('#loginStatus').find('span').length ? 'inplace_opt' : 'inplace_req');
}

function test_path(html) {
	$('#pathStatus').html(SPIN).load('/config/test_path');
	return html;
}

function updatePollInterval() {
	var $this = $(this);
	var status = $('#pollIntervalStatus').show();
	$.post('/config/update', {element_id: 'PollInterval', update_value: $this.val()}, function(s) {
		$this.val(s);
		status.hide();
	});
}

function updateShowThumbs() {
	var $this = $(this);
	var status = $('#showThumbsStatus').show();
	$.post('/config/update', {element_id: 'ShowThumbs', update_value: $this.attr('checked') ? 1 : 0}, function(s) {
		$this.attr('checked', s == 1);
		status.hide();
	});
}

function updateLogging() {
	var $this = $(this);
	var status = $('#updateLoggingStatus').show();
	$.post('/config/update', {element_id: 'Logging', update_value: $this.attr('checked') ? 1 : 0}, function (s) {
		$this.attr('checked', s == 1);
		status.hide();
	})
}

function updateBitrate() {
	$.post('/config/update', {element_id: 'Bitrate', update_value: $(this).val()});
}
//]]>
</script>

<% form_tag(request.request_uri) { %>
	<div class='box'>
		<h2>Netflix Info</h2>
		<table>
			<tr>
				<th>Netflix sign in name:</th>
				<td id='nfSignIn' class='value'><%= @post.nfSignIn %></td>
				<td id='loginStatus' rowspan='2' class='status'><%= @loginStatus %></td>
			</tr>
			<tr>
				<th>Netflix password:</th>
				<td id='nfPassword' class='value'></td>
			</tr>
		</table>

		<hr />

		<h2>Downloader Settings</h2>
		<table>
			<tr>
				<th>If queue is empty, check for changes every:</th>
				<td><%= select('post', 'PollInterval', @pollOpts, {:selected => @post.PollInterval.to_i}) %></td>
				<td class='status'><img id='pollIntervalStatus' style='display: none' src="/images/spinner.gif" /></td>
			</tr>
			<tr>
				<th>File location:</th>
				<td id='Path' class='value'><%= @post.Path %></td>
				<td id='pathStatus' class='status'><%= @pathStatus %></td>
			</tr>
			<tr>
				<th>Disk usage limit (GB):</th>
				<td id='DiskLimit' class='value'><%= @post.DiskLimit %></td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<th style='vertical-align: top; padding-top: .8em'>Target bitrate:</th>
				<td class='value'>
					<div style='padding: .4em .2em .2em .2em; border: 1px solid gray'>
						<%= radio_button('post', 'Bitrate', 'highest') %><span>Highest</span><br />
						<%= radio_button('post', 'Bitrate', 'lowest') %><span>Lowest</span><br />
						<%= radio_button('post', 'Bitrate', 'custom') %><span>Custom:</span>
						<table style='width: 96%; margin-left: 14px'><tr>
							<td id='BitrateCustom' class='value'><%= @post.BitrateCustom %></td>
						</tr></table>
					</div>
				</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<th>Server port (default <%= Conf::DEFAULT_PORT %>):</th>
				<td id='Port' class='value'><%= @post.Port %></td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<th>Enable logging (<a href='/config/log' target='netfluxd-log'>view log</a>):</th>
				<td class='value'><%= check_box('post', 'Logging') %></td>
				<td class='status'><img id='loggingStatus' style='display: none' src="/images/spinner.gif" /></td>
			</tr>
		</table>

		<hr />

		<h2>Display Options</h2>
		<table>
			<tr>
				<th>Show thumbnails:</th>
				<td class='value'><%= check_box('post', 'ShowThumbs') %></td>
				<td class='status'><img id='showThumbsStatus' style='display: none' src="/images/spinner.gif" /></td>
			</tr>
		</table>
	</div>
	<p>&nbsp;</p>
<% } -%>
